<template>
	<scroll-view
		scroll-y
		:scroll-top="scrollTop"
		@scroll="_scroll"
		class="_page"
		:style="{ paddingBottom: searchVal && !showMember && !notShowClaimOutLine ? 'calc(144rpx + env(safe-area-inset-bottom))' : 0 }"
	>
		<!-- #ifdef APP-PLUS||MP -->
		<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
			<template slot="left">
				<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
			</template>
			<template>
				<view class="nav_title">查院校最低录取分</view>
			</template>
			<!-- #ifdef APP-PLUS||H5 -->
			<template slot="right">
				<view class="_right" @click.stop="_shareOpen">
					<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
					<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
					<text class="text">分享</text>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
			<mSearch :val="searchVal" :apiInfo="searchApiInfo" @check="(e) => checkSearch(e)" placeholder="请输入本科专业查询"></mSearch>
		</view>
		<view class="default" v-if="!searchVal">
			<view class="img-box">
				<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
				<view class="text">先在上方输入本科专业哦~</view>
			</view>
		</view>

		<!-- 截图区域 -->
		<view class="table-box" v-else id="htmlCanvas">
			<view class="school-table" :class="{ baike_logo: !showMember }"
			:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
				<uni-table emptyText="暂无更多数据" v-if="!showMember">
					<!-- 表头行 -->
					<uni-tr tr_class="thead">
						<uni-th v-for="(item, index) in schoolInfo.header" :key="index" :align="index === 0 ? 'left' : 'center'" :width="index === 0 ? '40%' : '20%'">
							{{ item.val }}
						</uni-th>
					</uni-tr>

					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in schoolInfo.all_data" :key="index">
						<uni-td
							:align="lisIndex === 0 ? 'left' : 'center'"
							:width="lisIndex === 0 ? '40%' : '20%'"
							class="table-bold"
							v-for="(lis, lisIndex) in schoolInfo.header"
							:key="lisIndex"
						>
							<text v-if="item[lis.key ] || item[lis.key ] === 0 ">
							{{ item[lis.key] }}{{ lisIndex > 0 ? '分' : '' }}
							</text>
							<text v-else >
								未公布 
							</text>
						</uni-td>
						<template slot="tips" v-if="item.school_type || item.remark">
							<view class="majortips school-info">
								<view class="nature public" v-if="item.school_type" :class="[ schoolType[ item.school_type ] ]">{{ item.school_type }}</view>
								<view class="border-tips info_tips" v-if="item.remark">
									<uni-icons class="_flex" style="margin-right: 4rpx" type="info-filled" color="#E34D59" size="16"></uni-icons>
									<view class="single_row" :class="{ multiline: isOpenInfo[index] === 'open' }">
										{{ item.remark }}
									</view>
									<uni-icons
										@click="_toggle(item,index)"
										class="_flex"
										:class="[isOpenInfo[index]]"
										type="bottom"
										color="#E34D59"
										size="12"
									></uni-icons>
								</view>
							</view>
						</template>
					</uni-tr>
				</uni-table>
				<!-- 会员权益模块 -->
				<memberBenefits v-if="showMember"></memberBenefits>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom_btn" v-if="searchVal && !showMember && !notShowClaimOutLine">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>

		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>
		<!-- 截图 -->
		<subfunction v-if="searchVal && !showMember" @share="_shareOpen" :scrollTop="topHeight" @_top="_top"></subfunction>
	</scroll-view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import memberBenefits from '../components/memberBenefits.vue';
export default {
	components: {
		mSearch,
		subfunction,
		memberBenefits
	},
	data() {
		return {
			isLoading: true,
			scrollTop: 0,
			topHeight: 0,
			searchVal: '',
			isOpenInfo: {},
			searchApiInfo: {
				api: 'getLicationUniversityMajorList',
				data: 'major_name',
				checklabel: 'major_name'
			},
			majorInfo: {},
			schoolInfo: {}
		};
	},
	watch: {
		searchVal(curr) {
			if (!this.isLoading) {
				this.getInfo();
			}
		}
	},
	methods: {
		_toggle(item,index){
			let that = this;
			let _text = that.toggleTips(index, that.isOpenInfo);
			let obj = {
				[index]: _text
			}
			that.isOpenInfo = Object.assign({},that.isOpenInfo,obj);
		},
		checkSearch(info) {
			let that = this;
			that.searchVal = info[that.searchApiInfo.checklabel];
			that.majorInfo = info;

			that.isLoading = false;
		},
		async getInfo() {
			let that = this;
			if (!that.searchVal) {
				that.schoolInfo = {};
				that.majorInfo = {};
				return;
			}
			that.getUniversityMajorLuquScore();
		},
		async getUniversityMajorLuquScore() {
			let that = this;
			let obj = {
				major_id: that.majorInfo.major_id
			};
			let { code, data } = await that.$application_api.getUniversityMajorLuquScore(obj);
			if (code != 0) return;
			that.schoolInfo = data;
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		}
	},
	onLoad(){
		let that = this;
		getApp().globalData.isLiscation = true;
		let searchDataInfo = uni.getStorageSync('searchDataInfo');
		let activeInfo = searchDataInfo.checkInfo;
		activeInfo = Object.assign({},activeInfo,{
			major_name: activeInfo.major_real_name || activeInfo.major_name
		})
		that.checkSearch(activeInfo);
	},
};
</script>

<script module="renderScript" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	data(){
		return{}
	},
	methods:{
		// 发送数据到逻辑层
		emitData(e, ownerVm) {
			const dom = document.getElementById('htmlCanvas');
			let screenHeight = uni.getSystemInfoSync().screenHeight;
			let _height = 0;
			if(dom.clientHeight>screenHeight * 1.5){
				_height = screenHeight * 1.5;
			}else{
				_height = dom.clientHeight;
			}
			html2canvas(dom, {
				width: dom.clientWidth, //dom 原始宽度
				height: _height,
				scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
				scrollX: 0,
				dpi:300,
				scale:2,
				useCORS: true, //支持跨域，但好像没什么用
				backgroundColor: '#F4F5F7',
				timeout: 0
			}).then((canvas) => {
				// 将生产的canvas转为base64图片3
				let obj = {
					val: canvas.toDataURL('image/png', 1),
					_width: dom.clientWidth,
					_height: _height,
				}
				this.$ownerInstance.callMethod('receiveRenderData', obj)
			});
		}
	}
}
</script>

<style lang="scss" scoped>
$paddingLR: 40rpx;
._page {
	width: 100vw;
	min-height: 100vh;
	background-color: #ffffff;
	padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}
.content {
	width: 100%;
	background-color: #ffffff;
	padding-top: 52rpx;
	padding-bottom: 52rpx;
	border-radius: 0 0 30rpx 30rpx;
	.search-box {
		margin-bottom: 27rpx;
	}
	.statics-box {
		margin-top: 50rpx;
		width: 100%;
		.title {
			font-size: 39rpx;
			color: #121317;
			font-weight: bold;
		}
		.uls {
			margin-top: 18rpx;
			display: grid;
			grid-gap: 10rpx 30rpx;
			grid-template-areas: '. . .';
			.lis {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 23rpx;
				view {
					flex-shrink: 0;
				}
				.lis-left {
					color: #858688;
				}
				.lis-right {
					color: #121317;
					font-weight: bold;
				}
			}
		}
	}
}
.school-box {
	width: 100vw;
	height: max-content;
	padding: 40rpx 39rpx;
	box-sizing: border-box;
	.school-title {
		width: 100%;
		.title {
			font-size: 35rpx;
			color: #121317;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.tips {
			font-size: 27rpx;
			color: #121317;
			text {
				font-weight: bold;
			}
			text._blue {
				color: $bic-color-public;
			}
			text._yellow {
				color: $bic-color-civilian;
			}
			text._gray {
				color: $bic-color-independent;
			}
		}
	}
}
.table-box {
	width: 100vw;
	padding: 0 39rpx 80rpx;
	box-sizing: border-box;
	background-color: #ffffff;
}
</style>
